<template>
  <div class="components-contrl-bar">
    <v-btn-toggle>
      <v-btn @click="updateScale('reduce')">
        <v-icon>mdi-plus-circle-outline</v-icon>
      </v-btn>
      <v-btn v-text="parseFloat(scaleValue * 100).toFixed(0)" />
      <v-btn @click="updateScale('plus')">
        <v-icon>mdi-minus-circle-outline</v-icon>
      </v-btn>
      <v-btn :disabled="!canUndo" @click="editorUndo">
        <v-icon>mdi-undo</v-icon>
        撤销
      </v-btn>
      <v-btn :disabled="!canRedo" @click="editorRedo">
        <v-icon>mdi-redo</v-icon>
        重做
      </v-btn>
      <v-btn @click="showPreview">
        <v-icon>mdi-eye</v-icon>
        预览保存
      </v-btn>
      <v-btn @click="cancelFn">
        <v-icon>mdi-logout</v-icon>
        退出
      </v-btn>
    </v-btn-toggle>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  props: {
    // 是否loading
    loading: {
      type: Boolean,
      default: false
    },
    scale: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      // 画板缩放
      scaleValue: 1
    }
  },
  computed: {
    ...mapGetters([
      'canUndo',
      'canRedo'
    ])
  },
  created() {
    this.scaleValue = this.scale
  },
  methods: {
    editorUndo() {
      this.$store.dispatch('h5editor/editorUndo')
    },
    editorRedo() {
      this.$store.dispatch('h5editor/editorRedo')
    },
    /**
			 * 更新画板大小
			 */
    updateScale(type, value) {
      if (type === 'plus') {
        this.scaleValue = this.scaleValue + (value || 0.1) > 2 ? 2 : this.scaleValue + (value || 0.1)
      } else if (type === 'reduce') {
        this.scaleValue = this.scaleValue - (value || 0.1) > 0.5 ? this.scaleValue - (value || 0.1) : 0.5
      } else if (type === 'reset') {
        this.scaleValue = value || 1
      }

      this.$emit('update:scale', this.scaleValue)
    },
    /**
			 * 点击保存按钮
			 */
    save() {
      this.$emit('save')
    },
    /**
       * 显示预览
			 */
    showPreview() {
      this.$emit('showPreview')
    },
    /**
			 * 发布
			 */
    publishFn() {
      this.$emit('publish')
    },
    cancelFn() {
      this.$emit('cancel')
    }
  }
}
</script>

<style lang="scss" scoped>
  .components-contrl-bar {
    display: inline-block;
    z-index: 3;
  }
</style>
